<template>
  <div>
    <div class="search" :class="is_top?'top_search':''">
      <div class="nav">
        <div class="nav_search" @click="search()">
          <van-icon name="search" size="18px" />搜索
        </div>
        <div class="nav_screen" :class="type_obj.name || act_state_obj.name?'screen_color':''" @click="onScreen">
          <van-icon name="filter-o" size="18px"/>筛选
        </div>
      </div>
      
      <transition name="van-slide-right">
        <search
          ref="search"
          :ticket_list='ticket_list'
          :category='category'
          :type_obj='type_obj'
          :act_state_obj='act_state_obj'
          :is_top='is_top'
          :cc='cc'
        ></search>
      </transition>

      <div class="screen_condition" v-if="type_obj.name || act_state_obj.name">
        筛选条件：
        <span v-if="act_state_obj.name">{{act_state_obj.name}}</span>&nbsp;&nbsp;
        <span v-if="type_obj.name">{{type_obj.name}}</span>
        <span><van-icon name="close" @click="clearOptions" /></span>
      </div>

      <!-- 列表 -->
      <div class="ticketList" :class="type_obj.name || act_state_obj.name?'ticketList_top':''">
        <van-list
          v-model="isLoading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onSearch('val')"
        >
        <div v-for="(item,index) in ticket_list" :key="index" @click="skipDetails(item)">
          <TicketList :item="item"></TicketList>
        </div>
        </van-list>
      </div>

      <!-- 筛选 -->
      <transition name="van-slide-right">
        <screen 
          :is_show_state='is_show_state'
          ref="screen"
          :is_top='is_top'
        ></screen>
      </transition>
    </div>
  </div>
</template>

<script>
import TicketList from '@/components/TicketList'
import screen from '@/components/screen'
import search from '@/components/search'
import searchHistory from '@/components/searchHistory'
export default {
  props:{
    is_show_state:{
      type:Boolean,
      required:true,
    },
    is_top:{
      type:Boolean,
      required:true,
    },
    category:{
      type:String,
      required:true,
    },
    cc:{
      type:String,
      default:''
    }
  },
  components:{
    TicketList,
    searchHistory,
    screen,
    search,
  },
  data(){
    return{
      isLoading:true,
      finished:false,
      searchValue:"",
      type_obj:{},
      act_state_obj:{},
      ticket_list:[],//工单列表内容
      page:1,
      per_page:10,
      total:-1,
    }
  },
  watch:{
    
  },
  methods:{
    onSearch(val = ''){
      this.isLoading = true
      if(!val){
        this.ticket_list = []
        this.finished = false
        this.page = 1
      }
      let  data = {
        category:this.category,
      }
      if(this.cc){
        data.cc = this.cc
      }
      data.page = this.page
      data.per_page = this.per_page
      
      // 筛选条件
      if(Object.keys(this.type_obj).length != 0){
        data.workflow_ids = this.type_obj.id
      }
      if(Object.keys(this.act_state_obj).length != 0){
        data.act_state_id = this.act_state_obj.id
      }
      //获取工单列表数据
      this.$store.dispatch('api_get_ticket_list',data).then(res=>{
        this.isLoading = false
        this.ticket_list.push(...res.data.data.value)
        
        this.total = res.data.data.total
        this.page = this.page + 1
        if(this.ticket_list.length >= this.total){
          this.finished = true
        }
        if(this.cc == 'unread'){
          this.$parent.changeReadings(this.total)
        }
      })
    },
    //点击搜索导航栏
    search(){
      this.$refs.search.show()
    },
    //点击筛选导航栏
    onScreen(){
      this.$refs.screen.show()
    },
    change(){
      this.onSearch()
    },
    //确认筛选条件
    confirm(type,state){
      this.type_obj = type
      this.act_state_obj = state
      this.onSearch()
    },
    //清空筛选条件
    clearOptions(){
      this.$refs.screen.clear()
      this.type_obj = {}
      this.act_state_obj = {}
      this.onSearch()
    },
    skipDetails(item){
      let name = ''
      if(item.act_state_id == 0){//草稿中
        name = 'CreateTicket'
      }else{
        name = 'TicketDetails'
      }
      this.$store.state.is_cache = false//控制缓存钩子函数是否执行
      this.$router.push({
        name,
        query:{
          ticket_id:item.id,
          page:"myInitiation",
          workflow_id:item.workflow_id,
          workflow_name:item.workflow_info.workflow_name,
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.top_search{
   top: 0px !important;
}
.search{
  position: absolute;
  top: 45px;
  bottom: 0;
  left:0;
  right:0;
  .nav{
    height: 1.0667rem;
    width: 100%;
    font-size: 15px;
    line-height: 1.0667rem;
    background: #fff;
    display: flex;
    justify-content: center;
    border-bottom: 0.0267rem solid #F7F7F7;
    .nav_search{
      width: 50%;
      display: flex;
      justify-content: center;
      .van-icon{
        line-height: 1.0667rem;
      }
    }
    .screen_color{
      color:#3894F9;
    }
    .nav_screen{
      width: 50%;
      display: flex;
      justify-content: center;
      .van-icon{
        line-height: 1.0667rem;
      }
    }
  }
  .screen_condition{
    line-height: 0.6667rem;
    height: 0.6667rem;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 12px;
    color:#B5B5B5;
    .van-icon{
      float: right;
      font-size: 0.48rem;
      line-height: 0.6667rem;
    }
  }
  .ticketList{
    position: absolute;
    top:1.0933rem;
    bottom: 0;
    width: 100%;
    overflow: scroll;
  }
  .ticketList_top{
    top:1.76rem !important;
  }
  .ticketList::-webkit-scrollbar{
    display: none;
  }
  .loading_box{
    display: flex;
    justify-content: center;
    background: #fff;
  }
}
</style>